import React from 'react';
import {Card, Button, Tabs, message, Icon, Tag, Table, Row} from 'antd';
import RcTweenOneTag from './components/rc-tween-one-tag'
import reqwest from 'reqwest';

// import './ui.less';

const TabPane = Tabs.TabPane;
const columns = [
  {
    title: 'Name',
    dataIndex: 'name',
    sorter: true,
    render: (name) => `${name.first} ${name.last}`,
    width: '20%'
  },
  {
    title: 'Gender',
    dataIndex: 'gender',
    filters: [{text: 'male', value: 'male'}, {text: 'female', value: 'female'}],
    width: '20%'
  },
  {
    title: 'Email',
    dataIndex: 'email',
    sorter: true
    // render: name => `${name.first} ${name.last}`,
  }
];

export default class Buttons extends React.Component {
  state = {
    data: [],
    pagination: {},
    loading: false
  };

  componentDidMount() {
    this.fetch();
  }

  handleTableChange = (pagination, filters, sorter) => {
    const pager = {...this.state.pagination};
    pager.current = pagination.current;
    this.setState({
      pagination: pager
    });
    this.fetch({
      results: pagination.pageSize,
      page: pagination.current,
      sortField: sorter.field,
      sortOrder: sorter.order,
      ...filters
    });
  };

  fetch = (params = {}) => {
    console.log('params:', params);
    this.setState({loading: true});
    reqwest({
      url: 'https://randomuser.me/api',
      method: 'get',
      data: {
        results: 10,
        ...params
      },
      type: 'json'
    }).then((res) => {
      const pagination = {...this.state.pagination};
      // pagination.total = res.totalCount;  //因为返回的是10条
      pagination.total = 2000;
      this.setState({
        loading: false,
        data: res.results,
        pagination
      });
    });
  };

  newTabIndex = 0;

  componentWillMount() {
    const panes = [
      {
        title: 'Tab 1',
        content: 'Tab 1',
        key: '1'
      },
      {
        title: 'Tab 2',
        content: 'Tab 2',
        key: '2'
      },
      {
        title: 'Tab 3',
        content: 'Tab 3',
        key: '3'
      }
    ];
    this.setState({
      activeKey: panes[0].key,
      panes
    });
  }

  onChange = (activeKey) => {
    this.setState({
      activeKey
    });
  };

  onEdit = (targetKey, action) => {
    this[action](targetKey);
  };

  add = () => {
    const panes = this.state.panes;
    const activeKey = `newTab${this.newTabIndex++}`;
    panes.push({title: activeKey, content: 'New Tab Pane', key: activeKey});
    this.setState({panes, activeKey});
  };
  remove = (targetKey) => {
    let activeKey = this.state.activeKey;
    let lastIndex;
    this.state.panes.forEach((pane, i) => {
      if (pane.key === targetKey) {
        lastIndex = i - 1;
      }
    });
    const panes = this.state.panes.filter((pane) => pane.key !== targetKey);
    if (lastIndex >= 0 && activeKey === targetKey) {
      activeKey = panes[lastIndex].key;
    }
    this.setState({panes, activeKey});
  };

  handlePreventDefault = (e) => {
    e.preventDefault();
    console.log('Clicked! But prevent default.');
  };

  render() {
    return (
      <div>
        <Card title="Tab开头家族" className="card-wrap">
          <Tabs defaultActiveKey="1" onChange={() => message.info('Hi,您选择了页签：' + key)}>
            <TabPane tab={<span> <Icon type="plus"/>Table表格 </span>} key="Table表格">

              <Table
                columns={columns}
                rowKey={(record) => record.login.uuid}
                dataSource={this.state.data}
                pagination={this.state.pagination}
                loading={this.state.loading}
                onChange={this.handleTableChange}
              />
            </TabPane>

            <TabPane disabled tab={<span> <Icon type="edit"/>TabPane禁止使用</span>}
                     key="disabled禁止使用"> 欢迎学习React课程 </TabPane>

            <TabPane tab={<span> <Icon type="delete"/>Tab标签 </span>} key="Tab标签">
              <Row style={{marginTop: 10}}>
                {["magenta", "red", "volcano", "orange", "gold", "lime", "green", "cyan", "blue", "geekblue", "purple", "#2db7f5", "#108ee9", "#87d068",]
                  .map(item => <Tag key={item} color={item} style={{marginTop: 10}}>{item}</Tag>)}
              </Row>

              <Row style={{marginTop: 10}}>
                <RcTweenOneTag/>
              </Row>

            </TabPane>
          </Tabs>
        </Card>

        <Card title="Tab带图的页签" className="card-wrap">
          <Tabs
            onChange={this.onChange}
            activeKey={this.state.activeKey}
            type="editable-card"
            onEdit={this.onEdit}
          >
            {this.state.panes.map((panel) => {
              return <TabPane tab={panel.title} key={panel.key}/>;
            })}
          </Tabs>
        </Card>

        <Card>
          <Tag>Tag 1</Tag>
          <Tag>
            <a href="https://github.com/ant-design/ant-design/issues/1862">Link</a>
          </Tag>
          <Tag closable onClose={() => console.log(e)}>
            Tag 2
          </Tag>
          <Tag closable onClose={this.handlePreventDefault}>
            Prevent Default
          </Tag>
        </Card>
      </div>
    );
  }
}
